<template lang="pug">
  .modal-dialog.modal__overwrite.modal__lession-switch(role='document', v-show="show")
    .modal-content
      .modal-header
        h5.modal-title 切换课程
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true', @click="close") ×
      .modal-body
        .lession-switch__group
          .lession-switch__label 学期
          .lession-switch__options 
            span(v-for="item in semester", :key="item.termId" :class="{active: item.isCurrent}") {{item.startYear}}{{!item.term?'上':'下'}}半学期
        .lession-switch__group
          .lession-switch__label 学科
          .lession-switch__options 
            span 数学
            span 数学
            span 数学
            span 数学
            span 数学
            span 数学
            span 数学
            span 数学
        .lession-switch__list
          .lession-switch__item(v-for="item in books")
            .lession-switch__item__main
              h5 {{item.bookName}}
</template>
<style lang="scss", scoped>
.lession-switch__group {
  @include clearfix();
  margin-bottom: 10px;
  padding: 0 20px;
}
.lession-switch__label {
  float: left;
  font-weight: bold;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
}
.teacher .lession-switch__options span {
  border: 1px solid $teacherMainColor;
  color: $teacherMainColor;
  &.active {
    background: $teacherMainColor;
  }
}
.lession-switch__options {
  margin-left: 12 * 2 + 16px;
  cursor: pointer;
  span {
    display: inline-block;
    padding: 0 24px;
    margin-right: 28px;
    margin-bottom: 10px;
    height: 28px;
    line-height: 26px;
    border: 1px solid $mainColor;
    border-radius: 6px;
    font-size: 12px;
    color: $mainColor;
    &.active {
      background: $mainColor;
      color: #fff;
    }
  }
}
.lession-switch__list {
  @include clearfix();
  padding: 0 20px;
  margin-right: -20px;
}
.lession-switch__item {
  float: left;
  width: 20%;
  padding-right: 20px;
  padding-bottom: 40px;
}
.lession-switch__item__main {
  background: #f1f2f4;
  border-radius: 10px;
  padding-top: 125px;
  h5 {
    @include lineEllipsis();
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    height: 46px;
    line-height: 46px;
    text-align: center;
  }
}
</style>

<script>
import { mapState } from 'vuex'
import api from 'api/lession'
import teacherApi from 'api/teacher/lession'
export default {
  data () {
    return {
      semester: [],
      current: {},
      books: []
    }
  },
  computed: mapState({
    show: state => state.modal.switchLession
  }),
  watch: {
    show (val) {
      if (val) {
        this.getSemester()
        this.getCurrent().then(() => {
          this.getBook()
        })
      }
    },
    current: {
      deep: true,
      handler (val) {
      }
    }
  },
  methods: {
    getSemester () {
      return api.getSemester().then((response) => {
        this.semester = response.data.data
      })
    },
    getCurrent () {
      return api.getCurrentTerm().then(response => {
        this.current = response.data.data
      })
    },
    getBook () {
      return teacherApi.getBook({
        id: '120176175841542144',
        term: 2,
        from: 0,
        size: 10,
        subject: '117758898055675904'
      }).then(response => {
        this.books = response.data.data.list
      })
    },
    close () {
      this.$store.commit('hide', 'switchLession')
    }
  }
}
</script>